iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
1
自我挑戰組

菜雞們,讓我們一起征服JS及React吧系列 第 7

React菜雞-Day7:React Hook 起手式 ~ useState

  • 分享至 

  • xImage
  •  
tags: 鐵人賽 React javascript nodejs vscode

https://ithelp.ithome.com.tw/upload/images/20200910/20130155qKUWcDwzyD.png

  • 第七天!今天是第七天! 能夠堅持到七天,確實不簡單,今天的你,累積了一定的自信心,照鏡子都會忍不住多看一分鐘,真帥。/images/emoticon/emoticon07.gif

  • 過去React提倡使用class進行component的開發,坦白說,拜物件導向深植人心這麼久,學習他也是理所當然的事。

  • 不過,到了18年,React發佈了React Hook,可說是驚天動地,開始提倡functional component的設計,解決了class component代碼繁多,狀態控制複雜...等問題,讓程式更好維護。

  • 沒學過class component?別擔心,functional component是你的好搭擋,就決定是你了。/images/emoticon/emoticon30.gif

  • 今天我們就從React Hook的第一招useState來說起,

練習1: 先用傳統的設計方式建立基本觀念

  • 我們先透過這個練習,使用目前學習的基本知識,來完成一個簡單的事件處理。
  • 練習如下
** 設計一個計數器,具備兩個按鈕 **
- 宣告一個變數,並透過button onClick event來進行相對的動作
- 按鈕1: 變數加1
- 按鈕2: 變數減1

<提醒>: 這個範例我們還沒使用useState,你可以觀察看看發生什麼事!
  • 編輯src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from "./components/Counter";

ReactDOM.render(
  <Counter/>,
  document.getElementById('root')
);

  • 編輯src/components/Counter.js
import React from "react";

// *
// 設計一個Counter,包含以下三個元件
// <title />
// <Button1 /> <Button2 />
// *
export default function Counter() {
  let numState = 5; //<-- 給定一個預設值5
  return (
    <>
      <h1>{numState}</h1>            
      <button
        onClick={() => {
          console.log("Counter+1");
          return numState + 1;
        }}
      >
        加1
      </button>

      <button
        onClick={() => {
          console.log("Counter-1");
          return numState - 1;
        }}
      >
        減1
      </button>
    </>
  );
}

!!我的老天鵝...抹丁抹凍.../images/emoticon/emoticon04.gif

image alt

免驚! useState三步驟搞定

  • 還記得React提倡的virtual DOM概念吧,要讓React發揮效能,你得依循他訂下的規矩,將你的statesetStateFunc一起提交到中央,方便管理。

  • 使用方法很簡單,依循下方三步驟即可/images/emoticon/emoticon33.gif

import React, {useState} from "react";  //<--Step1


function YOUR_COMPONENT(){
  const [yourState, setYourStateFunc] = useState(初始值); //<--Step2
  
  ...
  
  return(
    ...
    <div> {setYourStateFunc(yourState+[任何運算])} </div>   //<--Ste3: 在JSX中,使用你定義好的 setYourStateFunc
    ...
  );
}

練習1-plus: 走開~讓專業的useState來

  • 編輯src/components/Counter.js

import React, {useState} from "react";

// *
// 設計一個Counter,包含以下三個元件
// <title />
// <Button1 /> <Button2 />
// *
export default function Counter() {
  const [numState, setNumState] = useState(5); //<-- 給定一個預設值5
  return (
    <>
      <h1>{numState}</h1>            
      <button
        onClick={() => {
          console.log("Counter+1");
          return setNumState(numState + 1);
        }}
      >
        加1
      </button>

      <button
        onClick={() => {
          console.log("Counter-1");
          return setNumState(numState - 1);
        }}
      >
        減1
      </button>
    </>
  );
}


練習2: 來點不一樣的花招試試

  • 我們新增一個button,並定義一組新的state,來控制我們文字的背景顏色

  • 編輯src/components/Counter.js

import React, { useState } from "react";

// *
// 設計一個Counter,包含以下三個元件
// <title />
// <Button1 /> <Button2 />
// *
export default function Counter() {
  const [numState, setNumState] = useState(5); //<-- 給定一個預設值5
  const [showColor, setShowColor] = useState(false); //<-- 給定預設的bgColor=white
  return (
    <>
      <h1 style={{backgroundColor:showColor?"yellow":"white"}}>{numState}</h1>
      <button
        onClick={() => {
          console.log("Counter+1");
          return setNumState(numState + 1);
        }}
      >
        加1
      </button>

      <button
        onClick={() => {
          console.log("Counter-1");
          return setNumState(numState - 1);
        }}
      >
        減1
      </button>

      <button
        onClick={() => {
          console.log("showColor is:"+showColor);
          return setShowColor(!showColor);
        }}
      >
      {showColor?"關閉":"打開"}
      </button>
    </>
  );
}

除了一般的變數,state也可以是Object或Array等其他形態嗎?

  • 當然可以/images/emoticon/emoticon47.gif

  • 以上面的範例來說,我如果只想要用一個state控制Counter的邏輯運算及背景顏色,你可以這麼寫

  • 編輯src/components/Counter.js

import React, { useState } from "react";

// *
// 設計一個Counter,包含以下三個元件
// <title />
// <Button1 /> <Button2 />
// *
export default function Counter() {
  const [stateList, setYourState] = useState({ value: 5, showColor: false });   //<-- 改用object來做狀態的控制

  return (
    <>
      <h1 style={{ backgroundColor: stateList['showColor'] ? "yellow" : "white" }}>
        {stateList["value"]}
      </h1>
      <button
        onClick={() => {
          console.log("Counter+1");
          return setYourState({ ...stateList, value: stateList["value"] + 1 });
        }}
      >
        加1
      </button>

      <button
        onClick={() => {
          console.log("Counter-1");
          return setYourState({ ...stateList, value: stateList["value"] - 1 });
        }}
      >
        減1
      </button>

      <button
        onClick={() => {
          console.log("showColor is:" + stateList['showColor']);
          return setYourState({ ...stateList, showColor: !stateList["showColor"] });
        }}
      >
        {stateList['showColor'] ? "關閉" : "打開"}
      </button>
    </>
  );
}



結論

  • 鐵人賽第七天,你學會了
1. 使用React Hook的第一招 useState 來控制畫面的邏輯
2. 了解到useState也可以吃不同的格式,包含object, array...等
  • 一點一滴的自信累積,讓你嘴角忍不住上揚,走路也有風,加油,我們繼續朝下一個7天邁進。
    /images/emoticon/emoticon62.gif

課後小練習

  • 題目: 嘗試著用昨天教的迴圈,來產生多個Counter吧
  • 將昨天學習的東西學會混搭使用,你就更能融會貫通,加油??

教學資源

  • 底下兩篇資源蠻推薦各位拜讀,都是React官方的教學文件,讓自己從A->A+

上一篇
React菜雞-Day6:用迴圈自動生成多個React-component
下一篇
React菜雞-Day8:學會JS獨特的用法,讓你的React更優雅-第一篇 Array func
系列文
菜雞們,讓我們一起征服JS及React吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言